<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>产品表</title>
</head>
<link rel="stylesheet" href="/webjars/element-ui/2.15.13/lib/theme-chalk/index.css">
<script src="/webjars/vue/2.6.14/dist/vue.js"></script>
<script src="/webjars/element-ui/2.15.13/lib/index.js"></script>
<script src="/webjars/axios/1.6.2/dist/axios.js"></script>
<style>
    .el-row {
        margin-bottom: 20px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>
<style>
    body{
        background-color: white;
    }
</style>
<body>
<div id="pro">
    <div>
        <template>
            <el-button type="primary" @click="orderadd">添加订单计划</el-button>
            <el-button type="info" @click="add">添加产品信息</el-button>
            <el-button type="warning" @click="proupdate">修改产品信息</el-button>
            <el-popconfirm title="确定删除吗" @confirm="delBatch()">
                <el-button slot="reference" type="danger">批量删除商品</el-button>
            </el-popconfirm>
        </template>
    </div>
    <template>
        <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    label="编号"
                    width="120"
                    prop="productId">
            </el-table-column>
            <el-table-column
                    prop="productName"
                    label="产品名称">
            </el-table-column>
            <el-table-column
                    prop="catName"
                    label="规格型号">
            </el-table-column>
            <el-table-column
                    prop="bomName"
                    label="BOM级别">
            </el-table-column>
            <el-table-column
                    prop="proUnits"
                    label="计量单位"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="common"
                    label="产品描述">
            </el-table-column>
        </el-table>
    </template>
    <!--    新增-->
    <template>
        <el-dialog
                title="添加产品信息"
                :visible.sync="addlog"
                width="50%">
            <el-form>
                <el-form-item label="产品名称">
                    <el-input v-model="vo.productName" type="text"></el-input>
                </el-form-item>
                <el-form-item label="规格型号">
                    <el-select style="width:104vh" v-model="vo.classid" placeholder="请选择">
                        <el-option
                                v-for="item in selectlist"
                                :key="item.catId"
                                :label="item.catName"
                                :value="item.catId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="BOM选择">
                    <el-cascader
                            style="width:104vh" @change="count" v-model="value"
                            :options="options"
                            :props="{ ...{ checkStrictly: true }, ...defaultParams }"
                            clearable></el-cascader>
                </el-form-item>
                <el-form-item label="计量单位">
                    <el-input v-model="vo.proUnits" type="text"></el-input>
                </el-form-item>
                <el-form-item label="产品描述">
                    <el-input v-model="vo.common" type="text"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="addreset">取 消</el-button>
    <el-button type="primary" @click="proinsert">确 定</el-button>
        </span>
        </el-dialog>
    </template>
    <!--    修改-->
    <template>
        <el-dialog
                title="添加产品信息"
                :visible.sync="updatelog"
                width="50%">
            <el-form>
                <el-form-item label="产品名称">
                    <el-input v-model="vo.productName" type="text"></el-input>
                </el-form-item>
                <el-form-item label="规格型号">
                    <el-select style="width:104vh" v-model="vo.classid" placeholder="请选择">
                        <el-option
                                v-for="item in selectlist"
                                :key="item.catId"
                                :label="item.catName"
                                :value="item.catId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="BOM选择">
                    <el-cascader
                            style="width:104vh" @change="count" v-model="value"
                            :options="options"
                            :props="{ ...{ checkStrictly: true }, ...defaultParams }"
                            clearable></el-cascader>
                </el-form-item>
                <el-form-item label="计量单位">
                    <el-input v-model="vo.proUnits" type="text"></el-input>
                </el-form-item>
                <el-form-item label="产品描述">
                    <el-input v-model="vo.common" type="text"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="upreset">取 消</el-button>
    <el-button type="primary" @click="proedit">确 定</el-button>
        </span>
        </el-dialog>
    </template>
    <!--    订单添加-->
    <el-drawer
            title="添加订单计划"
            :visible.sync="drawer"
            size="100%"
            :direction="direction">
        <el-form>
            <el-row :gutter="20">
                <el-col :span="6">
                    <div class="grid-content">
                        <el-form-item label="订单单号">
                            <el-input
                                    placeholder="请输入内容"
                                    v-model="orderlist.ordernumber"
                                    style="width: 74%"
                                    :disabled="true">
                            </el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content">
                        <el-form-item label="客户信息">
                            <template>
                                <el-select v-model="orderlist.cusoption" placeholder="请选择">
                                    <el-option
                                            v-for="item in cusoptions"
                                            :key="item.customerId"
                                            :label="item.customerName"
                                            :value="item.customerId">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content">
                        <el-form-item label="销售信息">
                            <template>
                                <el-select v-model="orderlist.saleoption" placeholder="请选择">
                                    <el-option
                                            v-for="item in saleoptions"
                                            :key="item.saleId"
                                            :label="item.saleName"
                                            :value="item.saleId">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content">
                        <el-form-item label="订单日期">
                            <el-date-picker
                                    v-model="orderlist.orderdate"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-form-item label="预计交付日期">
                <el-date-picker
                        v-model="orderlist.deliverydate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
        </el-form>
        <h3>确认产品信息</h3>
        <el-table
                ref="multipleTable"
                :data="orderlists"
                tooltip-effect="dark"
                height="250"
                style="width: 100%"
                @selection-change="handleChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    label="编号"
                    width="120"
                    prop="productId">
            </el-table-column>
            <el-table-column
                    prop="productName"
                    label="产品名称">
            </el-table-column>
            <el-table-column
                    prop="catName"
                    label="规格型号">
            </el-table-column>
            <el-table-column
                    prop="bomName"
                    label="BOM级别">
            </el-table-column>
            <el-table-column
                    prop="proUnits"
                    label="计量单位"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="common"
                    label="产品描述">
            </el-table-column>
            <el-table-column label="产品数量">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.num" type="number" @blur="ordermoneycount(scope.$index, scope.row)"
                              placeholder="请输入数量"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="产品单价">
                <template slot-scope="scope">
                    <el-input v-model.number="scope.row.price" @blur="ordermoneycount(scope.$index, scope.row)"
                              type="number" placeholder="请输入单价"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="产品总价">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.count" :disabled="true"></el-input>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 20px;margin-left: 10px">
            <el-row :gutter="20">
                <el-col :span="16">
                    <div class="grid-content"></div>
                </el-col>
                <el-col :span="8">
                    <div style="padding-left: 55px" class="grid-content">
                        <el-button @click="ordercall">取 消</el-button>
                        <el-button type="primary" @click="orderinsert">确 定</el-button>
                    </div>
                </el-col>
            </el-row>
        </div>
    </el-drawer>
</div>
<script>
    new Vue({
        el: "#pro",
        data: {
            tableData: [],
            addlog: false,
            drawer: false,
            direction: 'btt',
            vo: {
                common: '',
                proUnits: '',
                classid: '',
                productName: '',
                productId: '',
                bomId: ''
            },
            defaultParams: {
                label: 'bomName',
                value: 'bomId',
                children: 'children'
            },
            options: [],
            value: [],
            selectlist: [],
            updatelog: false,
            multipleSelection: [],
            proid: [],
            prolist: {},
            orderlist: {
                ordernumber: '',
                cusoption: '',
                saleoption: '',
                orderdate: '',
                deliverydate: '',
                num: '',
                price: '',
                count: ''
            },
            inputnum: '',
            inputcount: '',
            inputprice: '',
            cusoptions: [],
            saleoptions: [],
            orderlists: [],
            orderSelection: []
        },
        methods: {
            search() {
                axios.get("/duct/search")
                    .then(({data}) => {
                        this.tableData = data.data;
                    })
            },
            count() {
                this.vo.bomId = this.value[this.value.length - 1];
            },
            select() {
                axios.get("/cate/serachlist")
                    .then(({data}) => {
                        this.selectlist = data.data;
                    })
            },
            // 组合框查询
            cascaderlist() {
                axios.get("/duct/cascaderlist")
                    .then(({data}) => {
                        this.options = data.data;
                        this.options = data.data;
                    })
            },
            addreset() {
                this.addlog = false;
                this.reset();
            },
            upreset() {
                this.updatelog = false;
                this.reset();
            },
            add() {
                this.addlog = true;
            },
            proinsert() {
                axios.post("/duct/addPro", this.vo)
                    .then(({data}) => {
                        this.addlog = false;
                        this.$message({
                            message: data.msg,
                            type: data.code == 200 ? 'success' : 'error'
                        });
                        this.search();
                        this.reset();
                    })
            },
            proupdate() {
                if (this.multipleSelection.length != 1 || this.multipleSelection.length == undefined) {
                    this.$message.warning("请选择一条要修改的数据!");
                    return;
                }
                this.updatelog = true;
                this.vo.productId = this.prolist[0].productId;
                this.vo.productName = this.prolist[0].productName;
                this.vo.classid = this.prolist[0].classid;
                this.vo.proUnits = this.prolist[0].proUnits;
                this.vo.common = this.prolist[0].common;
                this.vo.bomId = this.prolist[0].bomId;
            },
            proedit() {
                axios.put("/duct/edit", this.vo)
                    .then(({data}) => {
                        this.updatelog = false;
                        this.$message({
                            message: data.msg,
                            type: data.code == 200 ? 'success' : 'error'
                        });
                        this.search();
                        this.reset();
                    })
            },
            delBatch() {
                if (this.multipleSelection.length == 0) {
                    this.$message.warning("请选择要删除的数据!");
                    return;
                }
                axios.put("/duct/prodel", this.multipleSelection).then(res => {
                    if (res.code === '0') {
                        this.$message.error(res.msg)
                        this.search()
                    } else {
                        this.$message.success("成功")
                        this.search();
                    }
                })
            },
            //获取订单单号
            generateId() {
                const now = new Date();
                const year = now.getFullYear();
                const month = String(now.getMonth() + 1).padStart(2, '0');
                const day = String(now.getDate()).padStart(2, '0');
                const hours = String(now.getHours()).padStart(2, '0');
                const minutes = String(now.getMinutes()).padStart(2, '0');
                const seconds = String(now.getSeconds()).padStart(2, '0'); // 加入秒数
                // 将年月日时分秒组合成编号
                return `${year}${month}${day}${hours}${minutes}${seconds}`;
            },
            custsearch() {
                axios.get("/cust/ductsearch")
                    .then(({data}) => {
                        this.cusoptions = data.data;
                    })
            },
            salesearch() {
                axios.get("/sell/ductsearch")
                    .then(({data}) => {
                        this.saleoptions = data.data;
                    })
            },
            searchorder() {
                axios.put("/duct/searchorder", this.multipleSelection)
                    .then(({data}) => {
                        this.orderlists = data.data;
                    })
            },
            orderadd() {
                if (this.multipleSelection.length == 0 || this.multipleSelection.length == undefined) {
                    this.$message.warning("至少要选择一个商品才能添加订单哦!");
                    return;
                }
                this.drawer = true;
                this.orderlist.ordernumber = this.generateId();
                this.custsearch();
                this.salesearch();
                this.searchorder();
            },
            ordercall() {
                this.drawer = false;
                this.orderreset();
            },
            orderreset() {
                this.orderlist.ordernumber = '';
                this.orderlist.cusoption = '';
                this.orderlist.saleoption = '';
                this.orderlist.orderdate = '';
                this.orderlist.deliverydate = '';
            },
            ordermoneycount(index, row) {
                // 确保数量和单价都已输入且为数字
                if (!isNaN(row.num) && !isNaN(row.price)) {
                    // 计算总价并更新到当前行的count字段
                    row.count = row.num * row.price;
                    this.orderlist.num = row.num;
                    this.orderlist.price = row.price;
                    this.orderlist.count = row.count;
                    // 如果你需要让视图立即更新，可以强制Vue重新渲染表格
                    this.$forceUpdate();
                } else {
                    // 如果输入的不是数字，可以重置总价或进行其他处理
                    row.count = 0;
                    // 提示用户输入有效的数字
                    this.$message.error('请输入有效的数字和价格');
                }
            },
            //清空
            reset() {
                this.vo.productName = '';
                this.vo.classid = '';
                this.vo.proUnits = '';
                this.vo.common = '';
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                this.prolist = val;
                if (val.length == 0) {
                    this.multipleSelection = 0;
                    this.proid = 0;
                    return;
                }
                this.proid = val.map(item => item.productId)
            },
            handleChange(val) {
                this.orderSelection = val;//订单新增选中的table数据
                this.orderSelection.ordernumber = this.orderlist.ordernumber;
            },
            //订单添加
            orderinsert() {
                axios.post("/duct/orderinsert", this.orderlist)
                    .then(({data}) => {
                        axios.post("/duct/ordersinsert", this.orderSelection)
                            .then(({data}) => {
                                this.drawer = false;
                                this.$message({
                                    message: data.msg,
                                    type: data.code == 200 ? 'success' : 'error'
                                });
                            })
                    })
            }
        },
        mounted() {
            this.search();
            this.select();
            this.cascaderlist();
        }
    })
</script>
</body>
</html>